<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框选选中</title>
    <style>
        .box {
            width: 130px;
            height: 100px;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
    </div>
    
    <script>
        var el = document.getElementsByClassName('checkBox')
        var startX = 0
        var startY = 0
        var overX = 0
        var overY = 0
        document.onmousedown = function(e) {
            startX = e.clientX
            startY = e.clientY
            console.log(e.clientX, e.clientY);
            
            var checkDiv = document.createElement('div')
            checkDiv.style.cssText = 'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #aaa;z-index:1000;opacity:0.6;display:none;';
            checkDiv.id = 'checkedDiv'
            document.body.appendChild(checkDiv)
            checkDiv.style.left = startX + 'px';
            checkDiv.style.top = startY + 'px';
        }
        document.onmousemove = function(e) {
            e.stopPropagation()
            var checkDiv = document.getElementById('checkedDiv')
            checkDiv.style.display = 'block'
            checkDiv.style.left = Math.min(e.clientX, startX) + 'px'
            checkDiv.style.top = Math.min(e.clientY, startY) + 'px'
            checkDiv.style.width = Math.abs(e.clientX - startX) + 'px'
            checkDiv.style.height = Math.abs(e.clientY - startY) + 'px'
        }
        document.onmouseup = function(e) {
            overX = e.clientX
            overY = e.clientY
            var checkDiv = document.getElementById('checkedDiv')
            
            for(let i = 0; i < el.length; i++) {
            if(el[i].offsetLeft + 13 >= startX && el[i].offsetLeft <= overX && el[i].offsetTop + 13 >= startY && el[i].offsetTop <= overY) {
                el[i].checked = !el[i].checked
            } else if(el[i].offsetLeft <= startX && el[i].offsetLeft + 13 >= overX && el[i].offsetTop + 13 >= startY && el[i].offsetTop <= overY) {
                el[i].checked = !el[i].checked
            } else if(el[i].offsetLeft <= startX && el[i].offsetLeft + 13 >= overX && el[i].offsetTop <= startY && el[i].offsetTop + 13 >= overY) {
                el[i].checked = !el[i].checked
            } else if(el[i].offsetLeft + 13 >= startX && el[i].offsetLeft <= overX && el[i].offsetTop <= startY && el[i].offsetTop + 13 >= overY){
                el[i].checked = !el[i].checked
            }
        }
        document.body.removeChild(checkDiv)
            console.log(e.clientX, e.clientY);
        }
         
        console.log(el);
    </script>
</body>
</html>